<script setup lang='ts'>
import { useGetMemberList, useGetMemberRight } from '@fl/api/member-api/member'

const { data } = useGetMemberList()
const { data: rightData } = useGetMemberRight()
</script>

<template>
    <el-table border
              height="350"
              :data="rightData"
              class="right-table w-full"
    >
        <el-table-column label="权益类型"
                         align="center"
                         prop="rightName"
        />

        <el-table-column label="权益说明"
                         align="center"
                         prop="rightDesc"
        />

        <template v-for="item in data"
                  :key="item.id"
        >
            <el-table-column align="center">
                <template #header>
                    <p>{{ item.levelName }}</p>

                    <p class="text-12">
                        {{ item.priceDate }}
                    </p>
                </template>

                <template #default="scope">
                    <div class="text-#dA0004 flex gap-15 justify-center">
                        <el-icon v-if="scope.row.levelIds.includes(item.id) "
                                 size="24"
                                 color="#67c23a"
                        >
                            <SuccessFilled />
                        </el-icon>

                        <el-icon v-else
                                 size="24"
                                 color="#909399"
                        >
                            <CircleCloseFilled />
                        </el-icon>
                    </div>
                </template>
            </el-table-column>
        </template>
    </el-table>
</template>

<style lang="less" scoped>

</style>

<style>
.right-table th.el-table__cell {
    background: #333;
    color: white;
}
</style>
